﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="main.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>主页</title>
    <link rel="stylesheet" href="/layui/css/layui.css" media="all"/>
    	<script src="/layui/layui.js"></script>
    	<style type="text/css">
    		i{
    			position:relative;
	    		display:inline-block;
	    		*display:inline;
	    		vertical-align:middle;
	    		line-height:60px;
	    		margin-left: 100px;
	    	}
	    	iframe{
	    		width: 100%;
	    		height:2000px;
	    		border: hidden;
	    		
	    	}
    	</style>
<script>
//JavaScript代码区域
      var turnToTop=function() {
            var content = document.getElementById("content");
        // 直接设置为0，是没有过渡效果的
        // 4. 用定时器做返回顶部的滚动效果
        var dsj = setInterval(function () {
            var distance = content.scrollTop;
            if(distance>=80)
                distance -= 80;
            else if(distance>0)
                distance=0
            if(distance == 0){
                //如果滚动的距离 <= 0 时，清除掉定时器，否则点击图标滚动到顶部后，不能往下拉，一拉就又滚动到顶部
                content.scrollTop = distance;
                clearInterval(dsj);
            }else{
                content.scrollTop = distance;
            }
        },20);

    }
    var $,element,layer;
layui.use(['element','layer'], function(){
    $ = layui.jquery;
    element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
    layer = layui.layer;
    //禁止iframe滚动
   
  //触发事件
  var active = {
    tabAdd: function(){
      //新增一个Tab项
      element.tabAdd('demo', {
        title: '新选项'+ (Math.random()*1000|0) //用于演示
        ,content: '内容'+ (Math.random()*1000|0)
        ,id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
      })
    }
    ,tabChange: function(){
      //切换到指定Tab项
      element.tabChange('demo', '22'); //切换到：用户管理
    }
    ,tabAddOrChange1: function(){
    	var exist=$("li[lay-id='"+11+"']").length; //判断是否存在tab
		if(exist==0){
			element.tabAdd('demo',{
			  title: "首页",
			  content: "<iframe src='/student/stuHome.html'></iframe>", //支持传入html
			  id: 11,
			});
		}
        element.tabChange('demo', '11');//切换tab
        turnToTop();
    }
     ,tabAddOrChange2: function(){
    	var exist=$("li[lay-id='"+22+"']").length; //判断是否存在tab
//  	var exist=$("li[lay-id='"+11+"']").length; //判断是否存在tab
		if(exist==0){
			element.tabAdd('demo',{
			  title: "学校课程",
			  content: "<iframe src='/course2.aspx'></iframe>", //支持传入html
			  id: 22,
			});
		}
         element.tabChange('demo', '22');//切换tab
         turnToTop();
    }
	,tabAddOrChange3: function(){
		var exist=$("li[lay-id="+33+"]").length; //判断是否存在tab
	//  	var exist=$("li[lay-id='"+11+"']").length; //判断是否存在tab
		if(exist==0){
			element.tabAdd('demo',{
			  title: "我的课表",
			  content: "<iframe src='/student/schedule.aspx'></iframe>", //支持传入html
			  id: 33,
			});
		}
        element.tabChange('demo', '33');//切换tab
        turnToTop();
      }
    ,tabAddOrChange4: function(){
		var exist=$("li[lay-id="+44+"]").length; //判断是否存在tab
	//  	var exist=$("li[lay-id='"+11+"']").length; //判断是否存在tab
		if(exist==0){
			element.tabAdd('demo',{
			  title: "选课",
			  content: "<iframe src='/student/chooseCourse.aspx'></iframe>", //支持传入html
			  id: 44,
			});
		}
        element.tabChange('demo', '44');//切换tab
        turnToTop();
      }
      , look_info: function () {
          layer.open({
              type: 2
              ,content: ['/info.aspx','no'] //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
              , area: '300px;'
              , offset: 'auto'
              , area: ['400px', '310px']
        }); 
      }
  };
  
  $('.site-demo-active').on('click', function(){
    var othis = $(this), type = othis.data('type');
    active[type] ? active[type].call(this, othis) : '';
  });
  
  //Hash地址的定位
  var layid = location.hash.replace(/^#test=/, '');
  element.tabChange('test', layid);
  
  element.on('tab(test)', function(elem){
    location.hash = 'test='+ $(this).attr('lay-id');
  });

});
</script>
<script type="text/javascript">

    window.onload = function () {
    var content = this.document.getElementById("content");
    // 1.注册窗口滚动事件
    content.onscroll = function(){
        // 找到返回顶部的ICON
        var returnTopICON = document.getElementById("returnTop");
        //非IE滚动的距离
        //console.log(document.documentElement.scrollTop);
        //IE滚动的距离
        //console.log(document.body.scrollTop);
        // Math.max 取非IE和IE两个滚动距离的最大值
        var scrollDistance = content.scrollTop;
        // 2. 滚动离顶部的距离大于300时，显示ICON
        if(scrollDistance > 300){
            returnTopICON.style.display = 'block';
        }else{
            returnTopICON.style.display = 'none';
        }
    }

    //3. 注册点击事件，返回顶部 ==>> 即设置scrollTop 的值为0
    var returnTopICON = document.getElementById("returnTop");
        returnTopICON.onclick = turnToTop;
      
}
</script>
</head>
<body class="layui-layout layui-layout-admin">
<form id="form1" runat="server">
       
        
  <div class="layui-header">
    <div class="layui-logo" ><img style="height: 50px"src="/image/logo.png"/></div>
    <!-- 头部区域（可配合layui已有的水平导航） -->
    <ul class="layui-nav layui-layout-left">
     <i style="font-size: 25px;">学生成绩管理系统</i>
    </ul>
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item">
        <a href="javascript:;">
          <img src="/img/touxiang.jpg" class="layui-nav-img">
          <span id="user_name" runat="server"></span>
        </a>
        <dl class="layui-nav-child">
          <dd><a class="site-demo-active" href="javascript:;" data-type="look_info">基本资料</a></dd>
          <dd><a href="javascript:;">安全设置</a></dd>
          <dd><a href="javascript:;">
              <asp:Button ID="loginOut" runat="server" Text="退出登录" OnClick="loginOut_Click" Style="border :none;background-color:inherit"></asp:Button>
              </a></dd>
            
        </dl>
      </li>
    </ul>
  </div>
  
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul class="layui-nav layui-nav-tree"  lay-filter="test">
        <li class="layui-nav-item ">
          <a class="site-demo-active" href="javascript:;" data-type="tabAddOrChange1">首页</a>
        </li>
         <li class="layui-nav-item">
          <a class="" href="javascript:;">课程管理</a>
           <dl class="layui-nav-child">
          <dd><a class="site-demo-active" href="javascript:;" data-type="tabAddOrChange2">学校课程</a></dd>
          <dd><a class="site-demo-active" href="javascript:;" data-type="tabAddOrChange3">查看课表</a></dd>
          <dd><a class="site-demo-active" href="javascript:;" data-type="tabAddOrChange4">选课</a></dd>
        </dl>
        </li>
      </ul>
    </div>
  </div>

  <div class="layui-body" id="content">
    <!-- 内容主体区域 -->
	<div class="layui-tab" lay-filter="demo" lay-allowclose="true">
	  <ul class="layui-tab-title">
	    <li class="layui-this" lay-id="11" >首页</li>
	    <!--<li lay-id="22">选课</li>
	    <li lay-id="33">我的课表</li>-->
	  </ul>
	  <div class="layui-tab-content">
	    <div class="layui-tab-item layui-show">
	    	<iframe src="/student/stuHome.html"  scrolling="no" ></iframe>
	    </div>
	    <!--<div class="layui-tab-item">
	    	<iframe src="update.html"></iframe>
	    </div>
	    <div class="layui-tab-item">
	    	<iframe src="table.html"></iframe>
	    </div>-->
	  </div>
	</div>
     <ul id="returnTop" class="layui-fixbar" style="bottom:50px;right:25px;display:none;">
         <li  class="layui-icon layui-fixbar-top" lay-type="top" style="display: list-item;"></li>
     </ul>
  <div class="layui-footer">
    <!-- 底部固定区域 -->
    © 湖北大学学生成绩管理系统
  </div>
</div>

</form>
    
</body>
</html>
